@import "reset.less";

/* -------------------------  公共类 ------------------------- */

//清除浮动
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

//less色盘 技能展示列表的背景色需要
@color: #e26c60;
.licolor(@index) when(@index>1) {
  .licolor(@index - 1);
  @spincolor: spin(@color, (@index * 60));
  @lightcolor: lighten(@spincolor, 27%);
  li:nth-of-type(@{index}) {
    span:nth-of-type(1) {
      background: @spincolor;
    }
    span:nth-of-type(2) {
      color: @spincolor;
    }
    em {
      background: @lightcolor;
    }
  }
}

/**
  *设置背景图位置函数
  * @index : 循环次数 
  * @w : 背景图片的宽高 
  * @s : @size 
  * @L : 初始时图片距离左侧的距离 
  * @T : 初始时图片距离顶部的距离 
*/
.icons(@index, @w, @s ,@L ,@T) when (@index > 0) {
  .icons(@index - 1, @w, @s, @L, @T);
  &:nth-of-type(@{index}) {
    background-position: (-(@index - 1) * @w / @s + @L) (@T / @s);
  }
}

/* -------------------------  栅格 ------------------------- */

.container {
  padding: 0 50px / @size;
}

/**
  * 设置栅格系统函数
  * @index : 循环次数 
  * @num : 需要将宽度平分为多少个栅格 
  * @s : 设置使用的屏幕尺寸 xs表示小屏 lg表示大屏
*/
.col(@index, @num, @s:xs) when (@index>0) {
  .col(@index - 1, @num, @s);
  .col-@{s}-@{index} {
    width: 100% / @num * @index;
    float: left;
  }
}

/**
  * 设置栅格系统的列排序函数
  * @index : 循环次数 
  * @num : 需要将宽度平分为多少个栅格 
  * @s : 设置使用的屏幕尺寸 xs表示小屏 lg表示大屏
*/
.col-push( @index, @num, @s ) when (@index>0) {
  .col-push(@index - 1, @num, @s);

  .col-@{s}-push-@{index} {
    position: relative;
    left: 100% / @num * @index;
  }

  .col-@{s}-pull-@{index} {
    position: relative;
    left: -100% / @num * @index;
  }
}

/* -------------------------  XS尺寸 ------------------------- */
@size : 2;

//设置小屏下的栅格系统 每行13列 每列50px
.col(13, 13);

//小屏下的个人信息部分的北京图片 有两张
.box_bj {
  background: url(../images/bj_circularone.png) no-repeat center top,
    url(../images/bj_bottom.png) no-repeat center bottom #1f2229;

  background-size: 100%;
}

//个人信息头部 小屏下名字和职位隐藏
.nav {
  height: 86px / @size;
  border-bottom: 2px / @size solid #15161a;

  .container {
    padding: 0;
  }

  .back {
    font-size: 0; //设置文字大小为0不让返回二字显示出来
    float: left;
    background: url(../images/icon.png) no-repeat;
    width: 38px / @size;
    height: 40px / @size;
    background-size: 400px / @size;
    margin: 24px / @size 0 0 20px / @size;
  }

  h1 {
    display: none;
    float: left;
  }
}

.self_bj {
  background: rgba(0, 0, 0, 0.2);

  //头像部分
  //xs屏幕下该部分宽100%
  .self_pic {
    .pic_box {
      padding: 53px / @size 0 40px / @size 10px / @size;
      box-sizing: border-box;

      img {
        width: 200px / @size;
        height: 200px / @size;
        border: 3px / @size solid #e16b5f;
        border-radius: 50%;
        box-sizing: border-box;
      }
    }

    figcaption {
      h1 {
        font-size: 48px / @size;
        font-weight: bold;
        color: #fff;
        line-height: 76px / @size;
        padding-top: 82px / @size;
        padding-left: 24px / @size;

        span {
          font-size: 32px / @size;
          color: #e16b5f;
          line-height: 60px / @size;
        }
      }
    }
  }

  //个性签名部分
  .self_sign {
    background: url(../images/triangle.png) no-repeat;
    background-size: 100% 100%;
    font-size: 26px / @size;
    color: #c5cbd0;
    line-height: 40px / @size;
    padding: 42px / @size 34px / @size 30px / @size 69px / @size;
    position: relative;

    //个签部分前后两个引号图片分别用伪类来写以达到自适应的效果
    &:before,
    &:after {
      content: "";
      width: 26px / @size;
      height: 26px / @size;
      background: url(../images/icon.png) no-repeat -38px / @size 0;
      background-size: 400px / @size;
      position: absolute;
      left: 27px / @size;
      top: 46px / @size;
    }

    &:after {
      position: static;
      background-position: -64px / @size 0;
      display: inline-block;
      vertical-align: top;
      margin-top: 9px / @size;
      margin-left: 10px / @size;
    }
  }

  //个人信息部分
  .self_mes {
    padding-top: 38px / @size;

    li {
      position: relative;
      font-size: 28px / @size;
      line-height: 72px / @size;

      span {
        position: absolute;
        left: 0;
        top: 0;
        width: 132px / @size;
        text-align: right;
        padding-right: 18px / @size;
        box-sizing: border-box;
        color: #8d8e8f;

        //每一项后面的小圆点
        &::after {
          content: "";
          position: absolute;
          width: 18px / @size;
          height: 18px / @size;
          border-radius: 50%;
          background-color: #754978;
          top: 27px / @size;
          right: -11px / @size;
          z-index: 2;
        }
      }

      p {
        margin-left: 132px / @size;
        color: #c5cbd0;
        line-height: 48px / @size;
        padding: 12px / @size 0 12px / @size 22px / @size;
        background: url(../images/context_center.png) repeat-y;
      }

      //小圆点上的虚线样式 给每个p签名加伪类，使用背景图片来做虚线
      //注意的是 第一个和最后一个p的背景图片只需要一半。所以第一个和最后一个必须单独设置
      //首先先设置为none 然后再单独写半个设置背景高度为50%左右
      &:first-of-type,
      &:last-of-type {
        p {
          background: none;
          position: relative;
          &:before {
            content: "";
            display: block;
            width: 2px;
            height: 56%;
            position: absolute;
            background: url(../images/context_center.png) repeat-y;
            left: 0;
            bottom: 0;
          }
        }
      }

      &:last-of-type {
        p:before {
          top: 0;
          height: 30px / @size;
        }
      }
    }
  }
}

//个人信息底部 联系方式部分
.contact {
  a {
    height: 118px / @size;
    line-height: 118px / @size;
    color: #c5cbd0;
    font-size: 24px / @size;
    float: left;
    &:first-of-type,
    &:last-of-type {
      &::before {
        content: "";
        display: inline-block;
        vertical-align: top;
        width: 60px / @size;
        height: 60px / @size;
        background: url(../images/icon.png) no-repeat 0px / @size -40px / @size;
        background-size: 400px / @size;
        margin: 31px / @size 10px / @size 0 10px / @size;
      }
    }
    &:first-of-type {
      margin-right: 64px / @size;
    }
    &:last-of-type {
      &::before {
        background-position: -60px / @size -40px / @size;
      }
    }
  }
}

//xs尺寸下的每一小部分的标题样式
.title {
  text-align: center;
  h2 {
    font-size: 50px / @size;
    line-height: 67px / @size;
    color: #985a99;
  }
  h4 {
    font-size: 26px / @size;
    line-height: 45px / @size;
    color: #999999;
  }
}

//技能展示部分
.skill_bj {
  background: #eef2f5;
  padding-top: 50px / @size;

  .skill_list {
    padding-top: 2px / @size;
    padding-bottom: 70px / @size;

    li {
      position: relative;
      height: 110px / @size;
      width: 100%;
      span:first-of-type,
      span:last-of-type {
        position: absolute;
        height: 70px / @size;
        line-height: 70px / @size;
        font-size: 36px / @size;
      }

      //左侧百分比部分
      span:first-of-type {
        width: 110px / @size;
        top: 40px / @size;
        left: 0;
        background: #e26c60;
        text-align: center;
        color: #fff;
      }

      //右侧技能名称部分
      span:last-of-type {
        top: 40px / @size;
        left: 110px / @size;
        text-indent: 12px / @size;
        z-index: 2;
        color: #e26c60;
      }

      //背景颜色部分
      em {
        position: absolute;
        top: 40px / @size;
        left: 110px / @size;
        background: #ede4e6;
        width: 10%;
        height: 70px / @size;
      }
    }

    //调用色盘函数 为每一部分设置颜色
    .licolor(9);
  }
}

//工作经验部分
.work {
  padding-top: 50px / @size;
  padding-bottom: 30px / @size;

  .work_list {
    padding-top: 46px / @size;
    padding-left: 29px / @size;
    li {
      position: relative;
      header {
        position: relative;
        padding-top: 16px / @size;
        border-bottom: 2px / @size solid #e26c60;
        border-left: 2px / @size solid #e26c60;
        height: 62px / @size;

        span:nth-child(1) {
          font-size: 24px / @size;
          line-height: 56px / @size;
          color: #e26c60;
          float: left;
          padding-left: 54px / @size;
          padding-top: 6px / @size;
        }

        span:nth-child(2) {
          font-size: 30px / @size;
          line-height: 62px / @size;
          color: #e26c60;
          float: right;
          padding-right: 10px / @size;
          bottom: 0;
        }

        //每个子项前面的圆形图标
        em {
          position: absolute;
          width: 60px / @size;
          height: 60px / @size;
          padding: 8px / @size;
          background-color: #fff;
          border-radius: 50%;
          left: -41px / @size;
          bottom: -41px / @size;
          border: 2px / @size solid transparent;
          border-top: 2px / @size solid #e26c60;
          transform: rotate(45deg);

          &::before {
            content: "";
            position: absolute;
            width: 60px / @size;
            height: 60px / @size;
            background: url(../images/icon.png) 0 -254px / @size no-repeat;
            background-size: 400px / @size;
            background-origin: content-box;
            background-clip: content-box;
            z-index: 3;
          }
        }

        &::after {
          content: "";
          position: absolute;
          width: 12px / @size;
          height: 12px / @size;
          background-color: #e26c60;
          border-radius: 50%;
          right: 0;
          bottom: -7px / @size;
        }
      }

      .content {
        padding-left: 36px / @size;
        padding-top: 11px / @size;
        border-left: 2px / @size solid #985a99;

        h4 {
          font-size: 32px / @size;
          line-height: 65px / @size;
          color: #464646;
          position: relative;

          &::before {
            content: "";
            position: absolute;
            width: 12px / @size;
            height: 12px / @size;
            background-color: #985a99;
            border-radius: 50%;
            left: -43px / @size;
            top: 28px / @size;
          }
        }

        p {
          font-size: 24px / @size;
          line-height: 48px / @size;
          color: #afafaf;
        }
      }
    }

    li:nth-child(1) {
      header {
        &::before {
          content: "";
          position: absolute;
          width: 12px / @size;
          height: 12px / @size;
          background-color: #e26c60;
          border-radius: 50%;
          left: -7px / @size;
          top: 0;
        }
      }
    }
    li:nth-child(2) {
      em:before {
        background-position: -60px / @size -254px / @size;
      }
    }
    li:nth-child(3) {
      em:before {
        background-position: -120px / @size -254px / @size;
      }
    }
    li:nth-child(4) {
      em:before {
        background-position: -180px / @size -254px / @size;
      }
    }
    li:last-of-type {
      .content {
        p:after {
          content: "";
          position: absolute;
          width: 12px / @size;
          height: 12px / @size;
          background-color: #e26c60;
          border-radius: 50%;
          left: -6px / @size;
          bottom: 0;
        }
      }
    }

    li:nth-child(odd) {
      header {
        border-color: #e26c60;
        &::after {
          background-color: #e26c60;
        }
      }
      em {
        border-top-color: #e26c60;
      }
      .content {
        border-color: #985a99;
        h4:before {
          background-color: #985a99;
        }
      }
    }
    li:nth-child(even) {
      header {
        border-color: #985a99;
        &::after {
          background-color: #985a99;
        }
      }
      em {
        border-top-color: #985a99;
      }
      .content {
        border-color: #e26c60;
        h4:before {
          background-color: #e26c60;
        }
      }
    }
  }
}

//小例子部分
.demos {
  .container {
    padding-top: 50px / @size;
    padding-bottom: 50px;
    background: #eef2f5;
  }

  .demos_list {
    padding-top: 40px / @size;
    color: #fff;

    //案例1、2、3的样式
    > li {
      margin-top: 10px / @size;
      background-color: #e26c60;
      > h2 {
        text-indent: 20px / @size;
        line-height: 100px / @size;
        font-size: 36px / @size;
        //案例前面的加号
        span {
          float: left;
          width: 40px / @size;
          height: 40px / @size;
          background: url(../images//icon.png) no-repeat -135px / @size 0;
          background-size: 400px / @size;
          margin-left: 19px / @size;
          margin-top: 30px / @size;
          &.li_active {
            background-position: -95px / @size 0;
          }
        }
      }

      // 子菜单
      .item_list {
        background: #fff;
        display: none;
        &.list_active {
          display: block;
        }
        li {
          .item_name {
            color: #000;
            font-size: 32px / @size;
            line-height: 99px / @size;
            text-indent: 30px / @size;
            border-top: 3px / @size solid #eef2f5;
          }

          // 小例子内容部分 起初是隐藏在屏幕右侧
          .item_content {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 2;
            background-color: #fff;
            padding: 0 30px / @size;
            transform: translateX(100vw); //隐藏在屏幕右侧
            transition: 0.3s;
            .head {
              position: relative;
              width: 100vw;
              margin-left: -30px / @size;
              height: 80px / @size;
              background-color: #000;
              z-index: 99;
              .back {
                font-size: 0;
                float: left;
                background: url(../images/icon.png) no-repeat;
                width: 38px / @size;
                height: 40px / @size;
                background-size: 400px / @size;
                margin: 24px / @size 0 0 20px / @size;
              }
            }

            // 每个小例子的名字部分
            header {
              height: 134px / @size;
              padding-top: 17px / @size;
              box-sizing: border-box;
              // 虚线用的是背景做的使用线性渐变 上面130px用白背景遮罩，下面4像素用透明显示类似于虚线的样式
              background: linear-gradient(
                  #fff 0,
                  #fff 130px / @size,
                  rgba(0, 0, 0, 0) 130px / @size,
                  rgba(0, 0, 0, 0) 134px / @size
                ),
                // 虚线样式部分 旋转9-度使变成类似于虚线的样子

                  repeating-linear-gradient(
                    90deg,
                    #d8d8d8 0,
                    #d8d8d8 4px / @size,
                    #fff 4px / @size,
                    #fff 6px / @size
                  );
              h2 {
                line-height: 54px / @size;
                font-size: 36px / @size;
                color: #000;
                padding: 0;
              }
              h4 {
                line-height: 43px / @size;
                font-size: 24px / @size;
                color: #999999;
              }
            }
            // 内容部分的介绍文章的样式
            article {
              color: #777879;
              font-size: 30px / @size;
              line-height: 50px / @size;
              padding-top: 20px / @size;
              padding-bottom: 19px / @size;
            }
            img {
              width: 100%;
            }
            button {
              border: none;
              padding: 0;
              display: block;
              width: 100%;
              height: 80px / @size;
              background-color: #985a99;
              color: #fff;
              margin-top: 30px / @size;
              font-size: 28px / @size;
            }

            // 分享部分的样式
            .share {
              padding: 30px / @size 0;
              height: 70px / @size;
              // 分享至 3个字的样式
              span:first-of-type {
                line-height: 70px / @size;
                font-size: 28px / @size;
                color: #777879;
                float: left;
              }
              // 分享图标的样式
              span:last-of-type {
                position: absolute;
                float: left;
                a {
                  float: left;
                  display: inline-block;
                  width: 70px / @size;
                  height: 70px / @size;
                  padding: 0 12px / @size;
                  background: url(../images/icon.png) no-repeat;
                  background-size: 400px / @size;
                  background-origin: content-box;
                  background-clip: content-box;
                  // 调用函数设置每一个图标的位置
                  .icons(5, 70px, @size, 0, -100px);
                  &:last-of-type {
                    padding-right: 0;
                  }
                }
              }
            }
          }

          &:first-of-type {
            border-top: none;
          }
        }

        .item_active {
          .item_name {
            background: #fdf6f5;
            border-color: #e4877e;
          }
        }
      }
    }
  }
}

// 项目池部分的样式
.products {
  background: #e26c60;
  .container {
    padding-top: 50px / @size;
    padding-bottom: 42px / @size;
  }
  .title {
    h2 {
      color: #fff;
    }
    h4 {
      color: #fff;
    }
  }

  .project_list {
    > li {
      // 每一个项目下面的下边框 用伪类做
      &:after {
        content: "";
        display: block;
        width: 100vw;
        height: 2px / @size;
        background-color: #e88980;
        margin-left: -50px / @size;
      }
      &:last-of-type {
        &:after {
          height: 0;
        }
      }

      // 项目标题部分 这里是响应式的所以需要几个不同的样式
      // 使用flex自适应项目名字的宽度
      header {
        padding: 42px / @size 0;
        position: relative;
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
        display: flex;

        .headImg {
          width: 321px / @size;
          height: 209px / @size;
          float: left;
          img {
            width: 321px / @size;
            height: 209px / @size;
            border-radius: 10px / @size;
          }
        }

        .headTitle {
          float: left;
          padding: 15px / @size 0 0 50px / @size;
          box-sizing: border-box;
          p {
            line-height: 47px / @size;
            &:first-child {
              font-size: 32px / @size;
              color: #fff;
            }
            &:last-child {
              font-size: 24px / @size;
              color: #cfcfcf;
            }
          }
        }
      }

      article {
        font-size: 26px / @size;
        line-height: 36px / @size;
        color: #fff;
      }

      // 使用到的技能部分
      footer {
        .use_skills {
          margin: 24px / @size 0 30px / @size 0;
          li {
            float: left;
            margin-right: 16px / @size;
            width: 130px / @size;
            height: 44px / @size;
            border-radius: 3px / @size;
            background-color: #fff;
            text-align: center;
            line-height: 44px / @size;
            font-size: 24px / @size;
            color: #4d437f;
            border: 1px solid #bc5045;
          }
        }
      }
    }
  }
}

// 回到顶部
.backtop {
  display: none;
  width: 84px / @size;
  height: 84px / @size;
  background: url(../images/icon.png) 0 -170px / @size;
  background-size: 400px / @size;
  position: fixed;
  right: 24px / @size;
  bottom: 24px / @size;
}

/* -------------------------  SM尺寸 ------------------------- */
@media all and (max-width: 960px) {
  .sm_hide {
    display: none;
  }
}
@media all and (min-width: 768px) {
  @size: 1;
  .container {
    padding: 0 50px / @size;
  }

  .nav {
    height: 86px / @size;
    border-bottom: 2px / @size solid #15161a;

    .back {
      width: 38px / @size;
      height: 40px / @size;
      background-size: 400px / @size;
      margin: 24px / @size 0 0 20px / @size;
    }
  }
  .title {
    text-align: center;
    h2 {
      font-size: 50px / @size;
      line-height: 67px / @size;
      color: #985a99;
    }
    h4 {
      font-size: 26px / @size;
      line-height: 45px / @size;
      color: #999999;
    }
  }

  .self_bj {
    .self_pic {
      .pic_box {
        padding: 53px / @size 0 40px / @size 20px / @size;

        img {
          width: 200px / @size;
          height: 200px / @size;
          border: 3px / @size solid #e16b5f;
        }
      }

      figcaption {
        h1 {
          font-size: 48px / @size;
          line-height: 76px / @size;
          padding-top: 82px / @size;
          padding-left: 24px / @size;

          span {
            font-size: 32px / @size;
            line-height: 60px / @size;
          }
        }
      }
    }

    .self_sign {
      font-size: 26px / @size;
      line-height: 40px / @size;
      padding: 42px / @size 34px / @size 30px / @size 69px / @size;

      &:before,
      &:after {
        width: 26px / @size;
        height: 26px / @size;
        background: url(../images/icon.png) no-repeat -38px / @size 0;
        background-size: 400px / @size;
        left: 27px / @size;
        top: 46px / @size;
      }

      &:after {
        background-position: -64px / @size 0;
        margin-top: 9px / @size;
        margin-left: 10px / @size;
      }
    }

    .self_mes {
      padding-top: 38px / @size;

      li {
        font-size: 28px / @size;
        line-height: 72px / @size;

        span {
          width: 132px / @size;
          padding-right: 18px / @size;

          &::after {
            width: 18px / @size;
            height: 18px / @size;
            top: 27px / @size;
            right: -11px / @size;
          }
        }

        p {
          margin-left: 132px / @size;
          line-height: 48px / @size;
          padding: 12px / @size 0 12px / @size 22px / @size;
        }

        &:last-of-type {
          p:before {
            height: 30px / @size;
          }
        }
      }
    }
  }

  .contact {
    a {
      height: 118px / @size;
      line-height: 118px / @size;
      font-size: 24px / @size;
      &:first-of-type,
      &:last-of-type {
        &::before {
          width: 60px / @size;
          height: 60px / @size;
          background: url(../images/icon.png) no-repeat 0px / @size -40px / @size;
          background-size: 400px / @size;
          margin: 31px / @size 10px / @size 0 10px / @size;
        }
      }
      &:first-of-type {
        margin-right: 64px / @size;
      }
      &:last-of-type {
        &::before {
          background-position: -60px / @size -40px / @size;
        }
      }
    }
  }

  .skill_bj {
    padding-top: 50px / @size;
    .skill_list {
      padding-top: 2px / @size;
      padding-bottom: 70px / @size;

      li {
        height: 110px / @size;
        span:first-of-type,
        span:last-of-type {
          height: 70px / @size;
          line-height: 70px / @size;
          font-size: 36px / @size;
        }
        span:first-of-type {
          width: 110px / @size;
          top: 40px / @size;
        }
        span:last-of-type {
          top: 40px / @size;
          left: 110px / @size;
          text-indent: 12px / @size;
        }

        em {
          top: 40px / @size;
          left: 110px / @size;
          height: 70px / @size;
        }
      }
    }
  }

  .work {
    padding-top: 50px / @size;
    padding-bottom: 30px / @size;

    .work_list {
      padding-top: 46px / @size;
      padding-left: 29px / @size;
      li {
        header {
          padding-top: 16px / @size;
          border-bottom: 2px / @size solid #e26c60;
          border-left: 2px / @size solid #e26c60;
          height: 62px / @size;

          span:nth-child(1) {
            font-size: 24px / @size;
            line-height: 56px / @size;
            padding-left: 54px / @size;
            padding-top: 6px / @size;
          }

          span:nth-child(2) {
            font-size: 30px / @size;
            line-height: 62px / @size;
            padding-right: 30px / @size;
            bottom: 0;
          }

          em {
            width: 60px / @size;
            height: 60px / @size;
            padding: 8px / @size;
            left: -42px / @size;
            bottom: -42px / @size;
            border: 2px / @size solid transparent;
            border-top: 2px / @size solid #e26c60;

            &::before {
              width: 60px / @size;
              height: 60px / @size;
              background: url(../images/icon.png) 0 / @size -254px / @size no-repeat;
              background-size: 400px / @size;
            }
          }

          &::after {
            width: 12px / @size;
            height: 12px / @size;
            bottom: -7px / @size;
          }
        }

        .content {
          padding-left: 36px / @size;
          padding-top: 11px / @size;
          border-left: 2px / @size solid #985a99;

          h4 {
            font-size: 32px / @size;
            line-height: 65px / @size;

            &::before {
              width: 12px / @size;
              height: 12px / @size;
              left: -43px / @size;
              top: 28px / @size;
            }
          }

          p {
            font-size: 24px / @size;
            line-height: 48px / @size;
          }
        }
      }

      li:nth-child(1) {
        header {
          &::before {
            width: 12px / @size;
            height: 12px / @size;
            left: -7px / @size;
          }
        }
      }
      li:nth-child(2) {
        em:before {
          background-position: -60px / @size -254px / @size;
        }
      }
      li:nth-child(3) {
        em:before {
          background-position: -120px / @size -254px / @size;
        }
      }
      li:nth-child(4) {
        em:before {
          background-position: -180px / @size -254px / @size;
        }
      }
      li:last-of-type {
        .content {
          p:after {
            width: 12px / @size;
            height: 12px / @size;
            border-radius: 50%;
            left: -6px / @size;
          }
        }
      }
    }
  }

  .demos {
    .container {
      padding-top: 50px / @size;
    }
    .demos_list {
      padding-top: 40px / @size;

      > li {
        margin-top: 10px / @size;
        > h2 {
          text-indent: 20px / @size;
          line-height: 100px / @size;
          font-size: 36px / @size;
          span {
            width: 40px / @size;
            height: 40px / @size;
            background: url(../images//icon.png) no-repeat -135px / @size 0;
            background-size: 400px / @size;
            margin-left: 19px / @size;
            margin-top: 30px / @size;
            &.li_active {
              background-position: -95px / @size 0;
            }
          }
        }

        .item_list {
          li {
            .item_name {
              font-size: 32px / @size;
              line-height: 99px / @size;
              text-indent: 30px / @size;
              border-top: 3px / @size solid #eef2f5;
            }

            .item_content {
              padding: 0 30px / @size;
              .head {
                width: 100vw;
                margin-left: -30px / @size;
                height: 80px / @size;
                background-color: #000;
                .back {
                  font-size: 0;
                  float: left;
                  background: url(../images/icon.png) no-repeat;
                  width: 38px / @size;
                  height: 40px / @size;
                  background-size: 400px / @size;
                  margin: 24px / @size 0 0 20px / @size;
                }
              }
              header {
                height: 134px / @size;
                padding-top: 17px / @size;
                background: linear-gradient(
                    #fff 0,
                    #fff 130px / @size,
                    rgba(0, 0, 0, 0) 130px / @size,
                    rgba(0, 0, 0, 0) 134px / @size
                  ),
                  repeating-linear-gradient(
                    90deg,
                    #d8d8d8 0,
                    #d8d8d8 4px / @size,
                    #fff 4px / @size,
                    #fff 6px / @size
                  );
                h2 {
                  line-height: 54px / @size;
                  font-size: 36px / @size;
                }
                h4 {
                  line-height: 43px / @size;
                  font-size: 24px / @size;
                }
              }
              article {
                font-size: 30px / @size;
                line-height: 50px / @size;
                padding-top: 20px / @size;
                padding-bottom: 19px / @size;
              }
              img {
                width: 100%;
              }
              button {
                width: 100%;
                height: 80px / @size;
                margin-top: 30px / @size;
                font-size: 28px / @size;
              }
              .share {
                padding: 30px / @size 0;
                height: 70px / @size;
                span:first-of-type {
                  line-height: 70px / @size;
                  font-size: 28px / @size;
                }
                span:last-of-type {
                  a {
                    width: 70px / @size;
                    height: 70px / @size;
                    padding: 0 12px / @size;
                    background-size: 400px / @size;
                    .icons(5, 70px, @size, 0, -100px);
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .products {
    .container {
      padding-top: 50px / @size;
      padding-bottom: 42px / @size;
    }
    .title {
      h2 {
        color: #fff;
      }
      h4 {
        color: #fff;
      }
    }

    .project_list {
      > li {
        &:after {
          height: 2px / @size;
          margin-left: -50px / @size;
        }
        header {
          padding: 42px / @size 0;

          .headImg {
            width: 321px / @size;
            height: 209px / @size;
            img {
              width: 321px / @size;
              height: 209px / @size;
              border-radius: 10px / @size;
            }
          }

          .headTitle {
            width: 329px / @size;
            height: 209px / @size;
            padding: 15px / @size 0 0 50px / @size;
            p {
              line-height: 47px / @size;
              &:first-child {
                font-size: 32px / @size;
              }
              &:last-child {
                font-size: 24px / @size;
              }
            }
          }
        }

        article {
          font-size: 26px / @size;
          line-height: 36px / @size;
        }
        footer {
          .use_skills {
            margin: 24px / @size 0 30px / @size 0;
            li {
              margin-right: 16px / @size;
              width: 130px / @size;
              height: 44px / @size;
              border-radius: 3px / @size;
              line-height: 44px / @size;
              font-size: 24px / @size;
            }
          }
        }
      }
    }
  }

  .backtop {
    width: 84px / @size;
    height: 84px / @size;
    background: url(../images/icon.png) 0 -170px / @size;
    background-size: 400px / @size;
    right: 24px / @size;
    bottom: 24px / @size;
  }
}

/* -------------------------  MD尺寸 ------------------------- */
@media all and (min-width: 960px) and (max-width: 1179px) {
  .col(32, 32, md);
  .col-push(32, 32, md);
}

@media all and (min-width: 960px) {
  .box_bj {
    background: url(../images/big_bj.png) no-repeat center top#1f2229;

    background-size: 100%;
  }
  .container {
    padding: 0;
    width: 960px;
    margin: 0 auto;
  }

  // 大屏下顶部导航栏的样式改变
  .nav {
    height: 99px;
    border-bottom: 1px solid #333039;

    .back {
      // 返回箭头取消
      display: none;
    }

    // 名字职位样式改变
    h1 {
      display: block;
      color: #fff;
      font-size: 36px;
      line-height: 99px;

      span {
        display: inline-block;
        font-family: "微软雅黑";
        font-size: 16px;
        color: #e16b5f;
        line-height: 82px;
        padding-top: 17px;
        padding-left: 55px;
        vertical-align: top;
      }
    }

    // 大屏下contact部分显示
    .contact {
      float: right;
      padding-right: 13px;
      a {
        height: 99px;
        line-height: 99px;
        font-size: 14px;
        &:first-of-type,
        &:last-of-type {
          &::before {
            width: 30px;
            height: 30px;
            background: url(../images/icon.png) no-repeat 0px -20px;
            background-size: 200px;
            margin: 34px 8px 0 34px;
          }
        }
        &:first-of-type {
          margin-right: 0px;
        }
        &:last-of-type {
          &::before {
            background-position: -30px -20px;
          }
        }
      }
    }
  }

  .title {
    h2 {
      font-size: 36px;
      line-height: 46px;
    }
    h4 {
      font-size: 16px;
      line-height: 28px;
    }
  }
  .md_hide {
    display: none;
  }

  // 个人信息部分
  .self_bj {
    height: 350px;

    // 头像部分
    .self_pic {
      .pic_box {
        padding: 75px 20px;

        img {
          width: 200px;
          height: 200px;
          border: 3px solid #e16b5f;
        }
      }
    }

    // 个签部分
    .self_sign {
      padding: 0 0 0 25px;
      box-sizing: border-box;
      background: none;
      font-size: 14px;
      line-height: 24px;
      margin-top: 151px;

      &:before,
      &:after {
        width: 15px;
        height: 15px;
        background: url(../images/icon.png) no-repeat -38px / 26 * 15 0;
        background-size: 400px / 26 * 15;
        left: 1px;
        top: 2px;
      }

      &:after {
        background-position: -64px / 26 * 15 0;
        margin-top: 4px;
        margin-left: 7px;
      }
    }

    // 个人信息部分
    .self_mes {
      padding-top: 66px;

      li {
        font-size: 14px;
        line-height: 30px;

        span {
          width: 78px;
          padding-right: 11px;

          &::after {
            width: 7px;
            height: 7px;
            top: 11px;
            right: -5px;
          }
        }

        p {
          margin-left: 78px;
          line-height: 30px;
          padding: 0px 0 0 13px;
        }

        &:last-of-type {
          p:before {
            height: 15px;
          }
        }
      }
    }
  }

  // 技能展示部分
  .skill_bj {
    padding-top: 36px;
    .skill_list {
      padding-top: 22px;
      padding-bottom: 59px;

      li {
        height: 60px;
        span:first-of-type,
        span:last-of-type {
          position: absolute;
          height: 40px;
          line-height: 40px;
          font-size: 20px;
        }
        span:first-of-type {
          width: 59px;
          top: 20px;
          left: 0;
        }
        span:last-of-type {
          top: 20px;
          left: 59px;
        }

        em {
          top: 20px;
          left: 59px;
          height: 40px;
        }
      }
    }
  }

  // 工作经验部分 大屏下样式改变为左右两边栏
  // 主要用奇偶数选择器控制左右栏
  .work {
    padding-top: 42px;
    padding-bottom: 73px;

    .work_list {
      padding-top: 34px;
      padding-left: 0;
      li {
        position: relative;
        padding-left: 50%; //右边栏用paddingleft控制
        header {
          position: relative;
          height: 37px;

          // 工作时间靠右下角定位
          span:nth-child(1) {
            font-size: 18px;
            line-height: 37px;
            float: right;
            padding-right: 19px;
            padding-left: 0;
            padding-top: 0;
          }

          // 工作职位靠在工作时间的下方
          span:nth-child(2) {
            font-size: 14px;
            height: 41px;
            line-height: 41px;
            position: absolute;
            right: 19px;
            top: 55px;
          }

          // em为每一个栏中间的小图片的容器 需要精确计算好图片的定位
          em {
            width: 60px;
            height: 60px;
            padding: 8px;
            left: -42px;
            bottom: -42px;
            border: 2px solid transparent;
            border-top: 2px solid #e26c60;
            border-bottom: 2px solid #e26c60;

            // 在em的伪类里插入下图片
            &::before {
              width: 60px;
              height: 60px;
              background: url(../images/icon.png) 0 -254px no-repeat;
              background-size: 400px;
              z-index: 3;
            }
          }

          // 每一栏后面的小圆点
          &::after {
            width: 10px;
            height: 10px;
            bottom: -5px;
          }
        }

        // 工作内容部分
        .content {
          padding-left: 33px;
          padding-top: 0;
          border-left: 2px solid #985a99;
          margin-left: -2px;

          h4 {
            font-size: 18px;
            line-height: 42px;

            // 图片左右侧的小圆点
            &::before {
              width: 10px;
              height: 10px;
              left: -77px;
              top: -10px;
            }
          }

          p {
            font-size: 12px;
            line-height: 23px;
            padding-top: 2px;
          }
        }
      }

      // 第一个工作经验的定位不一样 所以单独设置
      li:nth-child(1) {
        header {
          padding-top: 57px;
          span:nth-child(2) {
            top: 96px;
          }
          &::before {
            width: 10px;
            height: 10px;
            left: -6px;
          }
        }
      }
      li:nth-child(2) {
        em:before {
          background-position: -60px -254px !important;
        }
      }
      li:nth-child(3) {
        em:before {
          background-position: -120px -254px !important;
        }
      }
      li:nth-child(4) {
        em:before {
          background-position: -180px -254px !important;
        }
      }

      // 最下方的小圆点
      li:last-of-type {
        .content {
          p {
            position: relative;
          }
          p:after {
            width: 10px;
            height: 10px;
            left: 478px;
            bottom: 0;
            background-color: #e26c60;
          }
        }
      }

      // 奇数栏的样式改变
      li:nth-child(odd) {
        header {
          border-top-color: #e26c60;
          &::after {
            background-color: #e26c60;
          }
        }
        em {
          border-top-color: #e26c60;
          border-bottom-color: #985a99;
        }
        .content {
          border-color: #985a99;
          h4:before {
            background-color: #985a99;
          }
        }
      }

      // 偶数栏
      li:nth-child(even) {
        padding-left: 0;
        padding-right: 50%;
        header {
          padding-left: 16px;
          border-left: none;
          border-right: 2px solid #985a99;
          span:nth-child(1) {
            float: left;
          }
          span:nth-child(2) {
            padding-right: 53px;
          }
          &::after {
            right: -46px;
            bottom: -2px;
            background-color: #e26c60;
          }
          //


          em {
            left: 440px;
            border-top-color: #985a99;
            border-bottom-color: #e26c60;
            transform: rotate(-45deg);

            &::before {
              background: url(../images/icon.png) 0 -254px no-repeat;
              background-size: 400px;
              z-index: 3;
            }
          }
        }
        .content {
          padding-left: 0;
          padding-right: 19px;
          border-left: none;
          border-right: 2px solid #e26c60;
          margin-right: -2px;
          h4 {
            padding-left: 16px;
          }
          h4:before {
            background-color: #985a99;
            left: 0;
            top: -6px;
          }
          p {
            text-align: right;
          }
        }
      }
    }
  }

  .demos {
    background: #eef2f5;
    height: 680px;
    box-sizing: border-box;
    .container {
      padding-top: 44px;
    }
    .demos_list {
      width: 320px;
      padding-top: 20px;
      position: relative;

      > li {
        margin-top: 10px;
        > h2 {
          text-indent: 44px;
          line-height: 50px;
          font-size: 18px;
          span {
            width: 24px;
            height: 24px;
            background: url(../images//icon.png) no-repeat -135px * (24/40) 0;
            background-size: 400px * (24/40);
            margin-left: 10px;
            margin-top: 14px;
            &.li_active {
              background-position: -95px * (24/40) 0;
            }
          }
        }

        .item_list {
          li {
            .item_name {
              font-size: 14px;
              line-height: 47px;
              text-indent: 66px;
              border-top: none;
            }

            &:nth-of-type(1) {
              .item_content {
                height: 528px;
              }
            }

            .item_content {
              position: absolute;
              padding: 26px 30px;
              width: 620px;
              height: 408px;
              left: 340px;
              top: 30px;
              background-color: #fff;
              box-sizing: border-box;
              transform: translateX(0);

              header {
                height: 65px;
                padding: 0;
                background: linear-gradient(
                    #fff 0,
                    #fff 63px,
                    rgba(0, 0, 0, 0) 63px,
                    rgba(0, 0, 0, 0) 65px
                  ),
                  repeating-linear-gradient(
                    90deg,
                    #d8d8d8 0,
                    #d8d8d8 4px,
                    #fff 4px,
                    #fff 6px
                  );
                h2 {
                  line-height: 27px;
                  font-size: 18px;
                  color: #000;
                }
                h4 {
                  line-height: 22px;
                  font-size: 12px;
                }
              }
              article {
                font-size: 14px;
                line-height: 30px;
                padding-top: 9px;
                padding-bottom: 15px;
              }
              img {
                width: 100%;
              }
              button {
                width: 160px;
                height: 40px;
                background-color: #e26c60;
                color: #fff;
                margin-top: 20px;
                font-size: 16px;
                float: left;
                &:hover {
                  background-color: #e6948c;
                  cursor: pointer;
                }
              }
              .share {
                padding: 0;
                height: 40px;
                position: absolute;
                right: 278px;
                bottom: 31px;
                span:first-of-type {
                  line-height: 40px;
                  font-size: 14px;
                }
                span:last-of-type {
                  position: absolute;
                  float: left;
                  width: 250px;
                  a {
                    float: left;
                    display: inline-block;
                    width: 32px;
                    height: 32px;
                    padding: 4px;
                    background: url(../images/icon.png) no-repeat;
                    background-size: 400px;
                    background-origin: content-box;
                    background-clip: content-box;
                    margin-left: 10px;
                    .icons(5, 32px, 1, -180, 0);
                  }
                }
              }
            }
            &:first-of-type {
              border-top: none;
            }
          }
          .item_active {
            .item_name {
              background: #fdf6f5;
              border-color: #e4877e;
            }
          }
        }
      }
    }
  }
  .products {
    .container {
      padding-top: 44px;
      padding-bottom: 42px;
    }
    .project_list {
      > li {
        position: relative;
        &:after {
          content: "";
          display: block;
          width: 100%;
          height: 2px;
          background-color: #e88980;
          margin-left: 0;
        }
        &:last-of-type {
          &:after {
            height: 0;
          }
        }
        header {
          padding: 34px 0;
          width: 100%;
          position: relative;
          float: right;
          display: block;
          .headImg {
            width: 336px;
            height: 226px;
            float: right;
            img {
              width: 336px;
              height: 226px;
              border-radius: 10px;
            }
          }
          .headTitle {
            float: left;
            padding: 0;
            p {
              line-height: 35px;
              &:first-child {
                font-size: 24px;
                font-weight: bold;
              }
              &:last-child {
                font-size: 16px;
                color: #cfcfcf;
              }
            }
          }
        }
        article {
          width: 624px;
          padding-right: 72px;
          box-sizing: border-box;
          font-size: 14px;
          line-height: 24px;
          color: #fff;
          position: absolute;
          top: 120px;
          left: 0;
        }
        footer {
          margin: 22px 0;
          position: absolute;
          bottom: 0;
          left: 0;
          .use_skills {
            margin: 0;
            li {
              margin-right: 10px;
              width: 82px;
              height: 28px;
              border-radius: 3px;
              line-height: 28px;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
  .backtop {
    width: 84px;
    height: 84px;
    background: url(../images/icon.png) 0 -170px;
    background-size: 400px;
    right: 24px;
    bottom: 24px;
    &:hover {
      background-position-x: -84px;
      cursor: pointer;
    }
  }
}
/* -------------------------  LG尺寸 ------------------------- */
@media all and (min-width: 1180px) {
  .container {
    width: 1180px;
  }
  .col(59, 59, lg);
  .col-push(59, 59, lg);
  .nav {
    border-bottom-color: #37303b;
    .contact {
      padding-right: 0px;
    }
  }
  .self_bj {
    height: 350px;
    .self_pic {
      .pic_box {
        padding: 75px 30px;
        img {
          width: 200px;
          height: 200px;
          border: 3px solid #e16b5f;
        }
      }
    }
    .self_sign {
      padding: 0 67px 0 25px;
    }
    .self_mes {
      li {
        span {
          width: 134px;
        }
        p {
          margin-left: 134px;
        }
      }
    }
  }
  .work {
    .work_list {
      li:nth-child(even) {
        header {
          em {
            left: 550px;
            border-top-color: #985a99;
            border-bottom-color: #e26c60;
            transform: rotate(-45deg);
            &::before {
              background: url(../images/icon.png) 0 -254px no-repeat;
              background-size: 400px;
              left: 4;
              bottom: 4;
              z-index: 3;
            }
          }
        }
      }
      li:last-of-type {
        .content {
          p:after {
            left: 588px;
          }
        }
      }
    }
  }
  .demos {
    height: 700px;
    .demos_list {
      width: 360px;
      > li {
        .item_list {
          li {
            &:nth-of-type(1) {
              .item_content {
                height: 512px;
              }
            }
            .item_content {
              width: 800px;
              left: 380px;
              article {
                line-height: 35px;
                padding-bottom: 9px;
              }
              img {
                width: 100%;
                height: 173px;
              }
            }
          }
        }
      }
    }
  }
}
